<template>
	<view>
		<view class="person">
			<scroll-view scroll-x="true" class="item">
				<view class="headimg">
					<view>
						<image class="img img_active" src="../../../../static/img/head1.jpg"></image>
					</view>
					<text class="text">张丹丹</text>
				</view>
				<view class="headimg">
					<view>
						<image class="img" src="../../../../static/img/head2.jpg"></image>
					</view>
					<text class="text">张三峰</text>
				</view>
				<view class="headimg">
					<view>
						<image class="img" src="../../../../static/img/head3.jpg"></image>
					</view>
					<text class="text">胡兰</text>
				</view>
				<view class="headimg">
					<view>
						<image class="img" src="../../../../static/img/head4.jpg"></image>
					</view>
					<text class="text">李晨</text>
				</view>
				<view class="headimg">
					<view>
						<image class="img" src="../../../../static/img/head4.jpg"></image>
					</view>
					<text class="text">李晨</text>
				</view>
				<view class="headimg">
					<view>
						<image class="img" src="../../../../static/img/head4.jpg"></image>
					</view>
					<text class="text">李晨</text>
				</view>
			</scroll-view>
		</view>
		<view class="project">
			<view class="items">
				<view class="item1 flex flex-j-b">
					<view class="flex">
						<view class="title">
							健康调查
						</view>
					</view>
					<view class="status">
						<text>2020年3月18日</text>
						<view class="img">
							<image src="../../../../static/img/mark_right.png"></image>
						</view>
					</view>
				</view>
				<view class="uni-item-line" style="padding: 10upx 0;">
				</view>
				<view class="item2 flex flex-j-b">
					<view class="flex">
						<view class="title">
							调查项目
						</view>
						<view class="content">
							基本情况、慢病史、过敏史
						</view>
					</view>
					
				</view>
			</view>
			<view style="border-bottom: 1upx solid #EAEAEA;"></view>
			<view class="items">
				<view class="item1 flex flex-j-b">
					<view class="flex">
						<view class="title">
							健康调查
						</view>
					</view>
					<view class="status">
						<text>2020年3月18日</text>
						<view class="img">
							<image src="../../../../static/img/mark_right.png"></image>
						</view>
					</view>
				</view>
				<view class="uni-item-line" style="padding: 10upx 0;">
				</view>
				<view class="item2 flex flex-j-b">
					<view class="flex">
						<view class="title">
							调查项目
						</view>
						<view class="content">
							基本情况、慢病史、过敏史
						</view>
					</view>
					
				</view>
			</view>
			<view style="border-bottom: 1upx solid #EAEAEA;"></view>
			<view class="items">
				<view class="item1 flex flex-j-b">
					<view class="flex">
						<view class="title">
							健康调查
						</view>
					</view>
					<view class="status">
						<text>2020年3月18日</text>
						<view class="img">
							<image src="../../../../static/img/mark_right.png"></image>
						</view>
					</view>
				</view>
				<view class="uni-item-line" style="padding: 10upx 0;">
				</view>
				<view class="item2 flex flex-j-b">
					<view class="flex">
						<view class="title">
							调查项目
						</view>
						<view class="content">
							基本情况、慢病史、过敏史
						</view>
					</view>
					
				</view>
			</view>
			<view style="border-bottom: 1upx solid #EAEAEA;"></view>
			<view class="items">
				<view class="item1 flex flex-j-b">
					<view class="flex">
						<view class="title">
							健康调查
						</view>
					</view>
					<view class="status">
						<text>2020年3月18日</text>
						<view class="img">
							<image src="../../../../static/img/mark_right.png"></image>
						</view>
					</view>
				</view>
				<view class="uni-item-line" style="padding: 10upx 0;">
				</view>
				<view class="item2 flex flex-j-b">
					<view class="flex">
						<view class="title">
							调查项目
						</view>
						<view class="content">
							基本情况、慢病史、过敏史
						</view>
					</view>
					
				</view>
			</view>
			<view style="border-bottom: 1upx solid #EAEAEA;"></view>
			<view class="items">
				<view class="item1 flex flex-j-b">
					<view class="flex">
						<view class="title">
							健康调查
						</view>
					</view>
					<view class="status">
						<text>2020年3月18日</text>
						<view class="img">
							<image src="../../../../static/img/mark_right.png"></image>
						</view>
					</view>
				</view>
				<view class="uni-item-line" style="padding: 10upx 0;">
				</view>
				<view class="item2 flex flex-j-b">
					<view class="flex">
						<view class="title">
							调查项目
						</view>
						<view class="content">
							基本情况、慢病史、过敏史
						</view>
					</view>
					
				</view>
			</view>
			<view style="border-bottom: 1upx solid #EAEAEA;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less" scoped>
	//头像部分
	.person{
		width: 100%;
		height: 270upx;
		background-color: #18C7E1;
		display: flex;
		// justify-content: center;
		align-items: center;
		.item{
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			padding: 0 40upx;
			.headimg{
				width: 20%;
				display: inline-block;
				text-align: center;
				.img{
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
				}
				.img_active{
					width: 110upx;
					height: 110upx;
					border-radius: 50%;
				}
				.text{
					margin-top: 5upx;
					font-size: 30upx;
					color: #FFFFFF;
				}
			}
		}
	}
	.project{
		width: 100%;
		.content{
			display: flex;
			justify-content: center;
			align-items: center;
			padding-left: 10upx;
			color: #949494;
		}
		.items{
			width: 100%;
			padding: 20upx 40upx;
			.item1{
				width: 100%;
				height: 50upx;
				align-items: center;
				.title{
					height: 50upx;
					font-size: 35upx;
					font-weight: bold;
					display: flex;
					justify-content: center;
					align-items: center
				}
				.status{
					font-size: 25upx;
					color: #C1C1C1;
					display: flex;
					justify-content: center;
					align-items: center;
					.img{
						display: flex;
						justify-content: center;
						align-items: center;
						height: 30upx;
						margin-left: 20upx;
						image{
							width: 15upx;
							height: 25upx;
						}
					}
				}
			}
			.item2{
				width: 100%;
				// height: 50upx;
				padding-top: 20upx;
				align-items: center;
				.title{
					font-size: 25upx;
					padding: 7upx;
					color: #CCCCCC;
					border: 1upx solid #CCCCCC;
					border-radius: 10upx;
					display: flex;
					justify-content: center;
					align-items: center
				}
				.content{
					display: flex;
					justify-content: center;
					align-items: center;
					padding-left: 15upx;
					color: #949494;
				}
			}
		}
	}
</style>
